﻿@model ProductViewModel
@{
    ViewBag.Title = "Index";
}
<div id="fb-root">
</div>
<script type="text/javascript">
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));

    window.___gcfg = { lang: 'vi' };

    (function () {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>
<div class="container" style="margin: 0 auto; width: 1150px;">
    <div class="row-fluid">
        <div class="span12" style="padding-top: 10px;">
            <ul class="breadcrumb">
                <li><a href="@Url.Action("Index", "Home")">Trang chủ</a> <span class="divider">/</span></li>
                <li><a href="@Url.Action("Index", "Home")">Laptop chính hãng</a><span class="divider">/</span></li>
                <li><a href="@Url.Action("Index", "Home")">Apple</a><span class="divider">/</span></li>
                <li>@Html.Raw(Model.Name)</li>
            </ul>
        </div>
    </div>
    <div class="row-fluid" style="margin-bottom: 10px;">
        <div class="container-fluid" style="background-color: White; padding-top:10px;">
            <div class="row-fluid">
                <div class="span7" style="border-right: 1px dotted #CCC;">
                    <div class="container-fluid" style="padding: 0px;">
                        <div class="row-fluid">
                            <div class="span12">
                                <h4>@Model.Name</h4>
                                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                    <!-- Indicators -->
                                    <ol class="carousel-indicators">
                                        @for (int i = 0; i < Model.ProductImages.Count; i++)
                                        {
                                            var activeStr = i == 0 ? "class=\"active\"" : string.Empty;
                        
                                            <li data-target="#carousel-example-generic" data-slide-to="@i"  @Html.Raw(activeStr)>
                                            </li>
                                        }
                                    </ol>
                                    <!-- Wrapper for slides -->
                                    <div class="carousel-inner">
                                        @for (int i = 0; i < Model.ProductImages.Count; i++)
                                        {
                                            var activeStr = i == 0 ? "class=\"item active\"" : "class=\"item\"";
                                            var base64 = Convert.ToBase64String(Model.ProductImages[i].FileData);
                                            var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
                        
                                            <div @Html.Raw(activeStr)>
                                                <img src="@imgSrc" alt="">
                                            </div>
                                        }
                                    </div>
                                    <!-- Controls -->
                                    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left"></span>&lsaquo;</a> <a class="right carousel-control"
                                            href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
                                            </span>&rsaquo;</a>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <hr />
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <div class="fb-like" data-href="@Request.Url.AbsoluteUri" data-layout="standard" data-action="like" data-show-faces="true" data-share="true">
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <!-- Place this tag where you want the +1 button to render. -->
                                <div class="g-plusone" data-annotation="inline" data-width="300">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span5">
                    <div class="container-fluid" style="padding: 0px;">
                        <div class="row-fluid">
                            <div class="span12">
                                Giá sản phẩm: <span class="price">@Html.Raw(Model.Price.Value.ToString("#,0 VND"))</span>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <hr />
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <b>Thông tin sản phẩm:</b>
                                <p>
                                    @Html.Raw(Model.Description)
                                </p>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <hr />
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span4">
                                <b>Số lượt xem:</b>
                            </div>
                            <div class="span4">
                                230
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <b>Khuyến mãi:</b>
                                <p>
                                    <div class="alert alert-block">
                                        <img src="../../../Images/Promotions/christmas-gifts-icon.png" />
                                        con chụt to đùng khi mua máy ni.
                                    </div>
                                </p>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <hr />
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span4">
                                <button class="btn btn-small btn-warning">
                                    <i class="icon-shopping-cart icon-white"></i>Thêm vào giỏ hàng</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="tabbable">
                    <!-- Only required for left/right tabs -->
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab1" data-toggle="tab">Tổng quan sản phẩm</a></li>
                        <li><a href="#tab2" data-toggle="tab">Chi tiết sản phẩm</a></li>
                        <li><a href="#tab3" data-toggle="tab">Sản phẩm cùng loại</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                            <p>
                                Nội dung đang được cập nhật.</p>
                        </div>
                        <div class="tab-pane" id="tab2">
                            <p>
                                @Html.Raw(Model.DescriptionDetail)</p>
                        </div>
                        <div class="tab-pane" id="tab3">
                            <p>
                                Howdy, I'm in Section 2.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
